﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body { font-size: 14px; }

        .tab-control { width: 600px; }
        .tab-control > .hd > ul { padding: 0; margin: 0; height: 30px; line-height: 30px; }
        .tab-control > .hd > ul > li { display: inline-block; margin: 0; padding: 0; list-style: none; border-top-left-radius:5px; border-top-right-radius:5px; overflow:hidden; }
        .tab-control > .hd > ul > li > a { color: #666; display: block; width: 80px; text-align: center; text-decoration: none; background:#eee; }
        .tab-control > .hd > ul > li.on > a { background: #0094ff; color: #fff; }

        .tab-control > .bd > div { border: solid 2px #0094ff; display: none; height: 120px; padding: 15px; }
        .tab-control > .bd > div.on { display: block; }
    </style>
</head>
<body>
    <h1>简单的选项卡案例 1</h1>
    <div class="tab-control">
        <div class="hd">
            <ul>
                <li class="on"><a href="javascript:;" onmouseover="toTab(0);">标签1</a></li>
                <li><a href="javascript:;" onmouseover="toTab(1);">标签2</a></li>
                <li><a href="javascript:;" onmouseover="toTab(2);">标签3</a></li>
            </ul>
        </div>
        <div class="bd">
            <div class="on">内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <script>
        // 切换选项卡的函数
        function toTab(index) {
            // 选项卡头部标签的 li 集合（数组）
            var hd = document.querySelectorAll('.hd>ul>li');
            // 选项卡内容的 div 集合（数组）
            var bd = document.querySelectorAll('.bd>div');

            // 将所有的头部标签的 class 设置为空
            hd[0].className = '';
            hd[1].className = '';
            hd[2].className = '';

            // 将所有的内容标签的 class 设置为空
            bd[0].className = '';
            bd[1].className = '';
            bd[2].className = '';

            // 将第 index 个标签及内容的 class 设定为 on
            hd[index].className = 'on';
            bd[index].className = 'on';
        }
    </script>
</body>
</html>